<template>
  <view class="container">
    <!-- <view class="camera">
      <web-view v-if="isWeb" :src="webURL" :webview-styles="webviewStyles"></web-view>
    </view> -->
    <view class="videobox">
      <video :src="webURL" controls id="video" :autoplay="true" :show-mute-btn="false" :enable-play-gesture="false" :enable-progress-gesture="false" :show-progress="false" :muted="true"></video>
    </view>
    <view class="control">
      <view @click="showPTZ" class="control_box">
        <view>云台</view>
      </view>
    </view>

    <view v-if="isControl" class="monitor">
      <scroll-view scroll-y="true">
        <view class="monitor_box">
          <view v-for="(item, index) in monitorList" :key="index" @click="change(item)" class="monitor_list">
            <view class="monitor_name">{{ item.jknm }}</view>
            <view class="monitor_check">查看</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view v-else class="ptz">
      <view class="ptzbox">
        <view @click="steer('RIGHT_UP')" class="ptzlist"></view>
        <view @click="steer('UP')" class="ptzlist"></view>
        <view @click="steer('LEFT_UP')" class="ptzlist"></view>
        <view @click="steer('LEFT')" class="ptzlist"></view>
        <view @click="steer('LEFT_DOWN')" class="ptzlist"></view>
        <view @click="steer('DOWN')" class="ptzlist"></view>
        <view @click="steer('RIGHT_DOWN')" class="ptzlist"></view>
        <view @click="steer('RIGHT')" class="ptzlist"></view>
      </view>
      <view class="ptzbtn">
        <view @click="steer('ZOOM_IN')" class="ptzbtn_box">
          <image src="../static/video/ico_jia.png" mode="" />
        </view>
        <view @click="steer('ZOOM_OUT')" class="ptzbtn_box">
          <image src="../static/video/ico_jian.png" mode="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isWeb: false,
        webURL: '',
        webviewStyles: {
          height: '210px'
        },
        monitorList: [],
        isControl: true,
        code: null,
        widWidth: 0,
        widWHeight: 0,
        videoContext: null,
      }
    },
    onLoad(options) {
      if(options) {
        this.getList(options.name)
      }
    },
    methods: {
      // 获取摄像头列表
      getList(name) {
        this.$request.getCameraList().then(res => {
          let list = res.data || []
          let arr = list.filter(item => {
            return item.lbname == name
          })
          this.monitorList = arr[0]?.list || []
          this.getMonitor(this.monitorList[0].jkcode)
        })
      },
      // 获取地址
      getMonitor(code) {
        this.code = code
        this.$request.getHlsPreview({ cameraIndexCode: code }).then(res => {
          let url = res.data.url || ''
          setTimeout(() => {
            // this.webURL = '/hybrid/html/webplayer.html?cameraUrl=' + url
            this.webURL = url
            this.isWeb = true
          }, 0);
          uni.hideLoading();
        })
      },
      // 选择 切换视频
      change(item) {
        uni.showLoading({
          title: '加载中...'
        });
        this.isWeb = false
        this.getMonitor(item.jkcode)
      },
      showPTZ() {
        if(this.isWeb) {
          this.isControl = !this.isControl
        }
      },
      // 云台
      steer(str) {
        let temp = {
          cameraCodeIndex: this.code,
          action: 0,
          command: str,
          speed: 10,
        }
        this.$request.getControl(temp).then(res => {
          setTimeout(() => {
            this.controlStop(str)
          }, 3000);
        })
      },
      // 控制停止
      controlStop(str) {
        let temp = {
          cameraCodeIndex: this.code,
          action: 1,
          command: str,
          speed: 10,
        }
        this.$request.getControl(temp).then(res => {
          uni.showToast({
            title: '操作成功',
            icon: 'none',
            duration: 2000
          });
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .camera {
    width: 90%;
    height: 220px;
    // background-color: #fff;
    margin: 0 auto;
    border-radius: 20rpx;
    z-index: 1;
    // padding-bottom: 250px;

    .uni-webview--fullscreen {
      width: 100%;
      height: 100%;
      position: initial;
      z-index: 1;
    }
  }

  .videobox {
    width: 90%;
    height: 400rpx;
    margin: 20rpx auto 0;

    video {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;

      ::v-deep .uni-video-video {
        border-radius: 20rpx;
      }
    }
  }

  .control {
    padding: 30rpx 25rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;

    .control_box {
      background-color: #0D91FF;
      border-radius: 20rpx;
      font-size: 30rpx;
      line-height: 30rpx;
      padding: 10rpx 30rpx;
      color: #fff;
      z-index: 2;
    }
  }

  .ptz {
    padding: 0 25rpx;
    margin: 0 auto;
    height: calc(100vh - 650rpx);

    .ptzbox {
      width: 380rpx;
      height: 380rpx;
      position: relative;
      background-image: url('../static/video/ann123.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      margin: 20rpx auto 0;

      .ptzlist {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        background-repeat: no-repeat;

        &:nth-child(1) {
          background-image: url('../static/video/shanj1.png');
          top: 70rpx;
          right: 70rpx;
        }
        &:nth-child(2) {
          background-image: url('../static/video/shanj2.png');
          top: 30rpx;
          right: 180rpx;
        }
        &:nth-child(3) {
          background-image: url('../static/video/shanj3.png');
          top: 70rpx;
          left: 70rpx;
        }
        &:nth-child(4) {
          background-image: url('../static/video/shanj4.png');
          top: 180rpx;
          left: 30rpx;
        }
        &:nth-child(5) {
          background-image: url('../static/video/shanj5.png');
          top: 280rpx;
          left: 70rpx;
        }
        &:nth-child(6) {
          background-image: url('../static/video/shanj6.png');
          top: 330rpx;
          right: 180rpx;
        }
        &:nth-child(7) {
          background-image: url('../static/video/shanj7.png');
          top: 280rpx;
          right: 70rpx;
        }
        &:nth-child(8) {
          background-image: url('../static/video/shanj8.png');
          top: 175rpx;
          right: 20rpx;
        }
      }
    }

    .ptzbtn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 50%;
      margin: 50rpx auto 0;

      .ptzbtn_box {
        width: 50rpx;
        height: 50rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .monitor {
    padding: 0 25rpx;
    margin: 0 auto;
    height: calc(100vh - 600rpx);
    overflow-y: auto;

    .monitor_box {
      width: 100%;
      max-height: 100%;
      overflow-y: auto;
      padding: 35rpx 0 20rpx;

      .monitor_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 35rpx;
        box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);
        border: 1px solid #ccc;
        border-radius: 20rpx;
        margin-bottom: 10rpx;

        view {
          font-size: 30rpx;
          line-height: 30rpx;

          &:nth-child(1) {
            width: 80%;
          }

          &:nth-child(2) {
            color: #0D91FF;
          }
        }
      }
    }
  }
</style>
